<template>
  <div class="review-container pt-7 pb-28 max-w-8xl mx-auto px-4">
    <div class="breadcrumbs space-x-2 text-base flex flex-wrap items-center mb-4 tool-dom"
      :data-handle="tool.handle"
      :data-advertisement_id="tool.advertisement_id ? tool.advertisement_id : ''"
      data-page_position="ReviewPage">
      <common-link path="/"
        class="text-gray-1000 hover:text-purple-1200 go-home">
        {{$t('home')}}
      </common-link>
      <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
        iconName='right_outlined'
        v-if="tool && tool.categories && tool.categories.length>0"></svg-icon>
      <common-link path="/category/:handle"
        :params="{ handle:tool.categories[0].handle }"
        class="text-gray-1000 hover:text-purple-1200 go-prev"
        v-if="tool && tool.categories && tool.categories.length>0">
        {{tool.categories[0].name}}
      </common-link>
      <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
        iconName='right_outlined'></svg-icon>
      <common-link path="/tool/:handle"
        @click.native="handleExp(0, tool,'breadcrumbs')"
        target="_blank"
        :params="{ handle: tool.handle}"
        class="text-gray-1000 hover:text-purple-1200 go-prev">
        {{ toolName }}
      </common-link>

      <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
        iconName='right_outlined'></svg-icon>
      <span class="text-gray-1400 text-base">
        {{$t('review_tooLReview', {toolName: tool && toolName ? toolName : $route.params.handle})}}
      </span>
    </div>

    <h1 class="text-center text-5xl leading-normal font-bold text-gray-1000">
      {{$t('review_tooLReview', {toolName: tool && toolName ? toolName : $route.params.handle})}}
    </h1>

    <sponsored-by class="mt-2 text-lg text-gray-1000 font-semibold text-center"></sponsored-by>

    <div class="flex gap-6 items-center justify-center flex-wrap mt-3">
      <div class="flex gap-2 items-center">
        <div class="w-5.5 h-5.5">
          <svg-icon className="text-22"
            iconName='toolify_logo_min'></svg-icon>
        </div>
        <span class="text-base text-gray-1000">{{$t('review_byToolifyAI')}}</span>
      </div>
      <span class="text-base text-gray-1000">{{$formattedDate(review.created_at, fI18n, locale)}}</span>
      <min-share></min-share>
    </div>

    <div class="sm:flex items-start mt-15">
      <div class="mt-5 sm:mt-0 sm:mr-9 w-full w-pic">
        <a :href="tool.website"
          @click="handleExp(0, tool, 'visit website')"
          rel="nofollow"
          target="_blank"
          class="block rounded-lg w-full overflow-hidden tool-pic to-view-btn relative group cursor-pointer">
          <common-image class="sm:h-49 w-full"
            :src="tool.image ? $vResetPic(tool.image, 1060) : 'https://cdn.toolify.ai/default.webp'"
            :alt="toolName"></common-image>
          <div class="visitWebsite hidden group-hover:flex text-2xl sm:text-3xl">
            {{$t('review_visitWebsite')}}
          </div>
        </a>
      </div>
      <div class="mt-5 sm:mt-0 sm:flex-1 sm:w-0">
        <h2 class="bar-title mb-5 break-words">
          <span class="text-gray-1000 text-xl sm:text-28 font-bold break-words w-full">
            {{$t('review_whatIs', {toolName: tool && toolName ? toolName : $route.params.handle})}}
          </span>
        </h2>
        <p class="text-lg leading-8 text-gray-1000 break-words">
          {{tool.ai_content.what_is}}
        </p>
        <div class="border-t border-gray-2000 mt-5 mb-6"></div>
        <div class="flex items-center justify-between flex-wrap mt-5 gap-x-3 gap-y-3">
          <div class="text-base text-gray-1800 border border-yellow-1100 bg-yellow-1200 max-w-max truncate rounded-2xl t-label flex items-center justify-center"
            :title="$t('monthlyVisits')">
            <svg-icon className="text-sm mt--3"
              iconName='similarweb'></svg-icon>
            <span class="ml-2">{{tool.month_visited_count | vResetVisit }}</span>
          </div>

          <common-link path="/tool/:handle"
            @click.native="handleExp(0, tool, 'try it')"
            target="_blank"
            :params="{ handle: tool.handle}"
            class="bg-blue-1400 radius-22 min-w-36 text-center py-2 px-4 sm:px-6 hover:bg-blue-1500 focus:bg-blue-1600 to-view-btn">
            <span class="text-lg text-white whitespace-nowrap">{{$t('review_tryIt')}}</span>
          </common-link>
        </div>
      </div>
    </div>
    <!-- <div class="mt-20 bg-purple-2100 rounded-lg pt-7 px-8 pb-8">
      <div class="font-bold text-3xl">
        {{$t('review_tableOfContents')}}
      </div>
      <dir class="mt-7 bg-white rounded-lg py-7 px-6">
        <ul class="list-none space-y-4">
          <li>
            <a href="#"
              class="text-lg text-gray-1000 hover:text-purple-1300 hover:underline">
              1. Introduction to Finology
            </a>
          </li>
          <li>
            <a href="#"
              class="text-lg text-gray-1000 hover:text-purple-1300 hover:underline">
              2. Introduction to Finology
            </a>
          </li>
          <li>
            <a href="#"
              class="text-lg text-gray-1000 hover:text-purple-1300 hover:underline">
              3. Introduction to Finology
            </a>
          </li>
          <li>
            <a href="#"
              class="text-lg text-gray-1000 hover:text-purple-1300 hover:underline">
              4. Introduction to Finology
            </a>
          </li>
        </ul>
      </dir>
    </div>
    <div class="max-w-4xl mx-auto mt-36 space-y-14">
      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          Finology: The AI-Powered Cash Flow Solution for Small Businesses
        </h3>
        <div class="text-lg	text-gray-1000 mt-5 space-y-5">
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
        </div>
      </div>
      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          Finology: The AI-Powered Cash Flow Solution for Small Businesses
        </h3>
        <div class="text-lg	text-gray-1000 mt-5 space-y-5">
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
        </div>
      </div>
      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          Finology: The AI-Powered Cash Flow Solution for Small Businesses
        </h3>
        <div class="text-lg	text-gray-1000 mt-5 space-y-5">
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
          <p>
            Are you a small business owner struggling with financial management? Do you find it challenging to keep track of your cash flow and make informed decisions? Introducing Finology, the ultimate solution to your financial woes. With Finology, you can achieve financial stability, gain valuable insights, and turn your business into a thriving success. In this article, we will explore the features and benefits of Finology, how it works, and how it can revolutionize your business.
          </p>
        </div>
      </div>

      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          {{$t('review_faq_title')}}
        </h3>
        <div class="space-y-4 mt-8">
          <div>
            <h4 class="text-22 text-gray-1000 font-bold">
              Q: Is my financial data safe with Finology?
            </h4>
            <div class="mt-3 space-y-3 text-lg text-gray-1000">
              <p>A: Yes, Finology takes data security seriously. They use advanced encryption and security protocols to protect your financial information. Additionally, Finology only has read-only access to your financial accounts, ensuring that no transactions can be initiated through the platform</p>
            </div>
          </div>
          <div>
            <h4 class="text-22 text-gray-1000 font-bold">
              Q: Is my financial data safe with Finology?
            </h4>
            <div class="mt-3 space-y-3 text-lg text-gray-1000">
              <p>A: Yes, Finology takes data security seriously. They use advanced encryption and security protocols to protect your financial information. Additionally, Finology only has read-only access to your financial accounts, ensuring that no transactions can be initiated through the platform</p>
            </div>
          </div>
          <div>
            <h4 class="text-22 text-gray-1000 font-bold">
              Q: Is my financial data safe with Finology?
            </h4>
            <div class="mt-3 space-y-3 text-lg text-gray-1000">
              <p>A: Yes, Finology takes data security seriously. They use advanced encryption and security protocols to protect your financial information. Additionally, Finology only has read-only access to your financial accounts, ensuring that no transactions can be initiated through the platform</p>
            </div>
          </div>
          <div>
            <h4 class="text-22 text-gray-1000 font-bold">
              Q: Is my financial data safe with Finology?
            </h4>
            <div class="mt-3 space-y-3 text-lg text-gray-1000">
              <p>A: Yes, Finology takes data security seriously. They use advanced encryption and security protocols to protect your financial information. Additionally, Finology only has read-only access to your financial accounts, ensuring that no transactions can be initiated through the platform</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          {{$t('review_conclusion')}}
        </h3>
        <div class="text-lg	text-gray-1000 mt-5 space-y-5">
          <p>
            Finology is the AI-powered cash flow solution that can revolutionize your small business. By providing real-time insights, actionable recommendations, and expert support, Finology empowers you to take control of your finances and unlock the full potential of your business. With Finology, you can achieve financial stability, make data-driven decisions, and pave the way for long-term success.
          </p>
        </div>
      </div>
      <div>
        <h3 class="text-2xl	text-gray-1000 font-bold">
          {{$t('review_resources')}}
        </h3>
        <div class="text-lg	text-gray-1000 mt-5 space-y-5">
          <p>
            To learn more about Finology and start transforming your business's financial health, visit their official website: <a href="www.finology.com"
              class="text-blue-1800 hover:opacity-80">www.finology.com</a>
          </p>
        </div>
      </div>
    </div> -->
    <div class="review-content max-w-4xl mx-auto mt-24"
      v-html="review.content"
      ref="menu">
    </div>
    <div class="max-w-5xl mx-auto mt-20 bg-purple-2100 rounded-lg p-5 sm:p-10 sm:flex items-center gap-14">
      <div class="w-full w-pic-f">
        <common-image class="sm:h-49 w-full"
          :src="tool.image ? $vResetPic(tool.image,970) : 'https://cdn.toolify.ai/default.webp'"
          :alt="toolName"></common-image>
      </div>
      <div class="sm:flex-1 sm:w-0 mt-5 sm:mt-0">
        <div class="text-4xl text-gray-1000 font-bold break-words">
          {{$t('review_aboveIsAllTheREVIEW', {toolName: tool && toolName ? toolName : $route.params.handle})}}
        </div>
        <div class="mt-5 sm:mt-12">
          <common-link path="/tool/:handle"
            @click.native="handleExp(0, tool, 'try now')"
            target="_blank"
            :params="{ handle: tool.handle}"
            class="block sm:inline-block bg-black rounded-lg w-full sm:w-auto min-w-36 text-center py-3 sm:py-5 px-4 sm:px-6 hover:bg-gray-800">
            <span class="text-lg text-white whitespace-nowrap">{{$t('review_tryItNow')}}</span>
          </common-link>
        </div>
      </div>
    </div>
    <div class="page-ctrl max-w-5xl mx-auto block sm:flex items-center justify-between flex-wrap gap-6 mt-14 p-6">
      <div class="flex-1 flex w-full sm:w-auto">
        <common-link path="/review/:handle"
          v-if="hasRealVal(prev) && hasRealVal(prev.handle)"
          :params="{ handle: prev.handle}"
          class="inline-flex flex-1 max-w-full items-center gap-3 text-lg font-medium text-gray-1000 hover:text-purple-1300 group">
          <svg-icon className="text-gray-1800 text-30 text-slate-400 mx-3 h-7 w-7 flex-shrink-0 group-hover:text-purple-1300"
            iconName='toolify_left_default'></svg-icon>
          <div class="flex-1 w-0 truncate">
            {{prev.name}}
          </div>
        </common-link>
      </div>
      <div class="flex-1 flex justify-end w-full sm:w-auto mt-3 sm:mt-0">
        <common-link path="/review/:handle"
          v-if="hasRealVal(next) && hasRealVal(next.handle)"
          :params="{ handle: next.handle}"
          class="inline-flex flex-1 max-w-full items-center gap-3 text-lg font-medium text-gray-1000 hover:text-purple-1300 group">
          <div class="flex-1 w-0 truncate text-right">
            {{next.name}}
          </div>
          <svg-icon className="text-gray-1800 text-30 text-slate-400 mx-3 h-7 w-7 flex-shrink-0 group-hover:text-purple-1300"
            iconName='toolify_right_default'></svg-icon>
        </common-link>
      </div>
    </div>

    <div class="bg-white mt-10"
      v-if="recommendBottomList && recommendBottomList.length > 0">
      <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-4">
        <h3 class="text-26 leading-normal text-purple-1300 font-semibold break-words mb-4">{{$t('recommend_mostPeopleLike')}}</h3>
        <div class="tools grid gap-5 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 mb-5">
          <min-tool v-for="(item, key) in recommendBottomList"
            :key="item.handle+'-'+key"
            :toolPosIndex="key"
            toolPosition="Bottom"
            :toolsData="item"></min-tool>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import mixinsExposure from '~/mixins/mixins-exposure'
import _ from 'lodash'
import { mapState, mapActions } from 'vuex'
import MinShare from '../../components/MinShare.vue'
export default {
  components: { MinShare },
  name: 'Review',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
        {
          hid: 'og:image:alt',
          name: 'og:image:alt',
          content: this.title,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
      script: [
        {
          json: {
            '@context': 'https://schema.org',
            '@type': 'Article',
            headline: this.$t('review_tooLReview', {
              toolName:
                this.tool && this.toolName
                  ? this.toolName
                  : this.$route.params.handle,
            }),
            image: [
              this.tool.image
                ? this.tool.image
                : 'https://cdn.toolify.ai/default.webp',
            ],
            dateModified: this.review.created_at
              ? moment(this.review.created_at * 1000).format(
                  'YYYY-MM-DDTHH:mm:ssZ'
                )
              : null,
            datePublished: this.review.updated_at
              ? moment(this.review.updated_at * 1000).format(
                  'YYYY-MM-DDTHH:mm:ssZ'
                )
              : null,
            author: {
              '@type': 'Organization',
              name: 'toolify',
              url: 'https://www.toolify.ai',
            },
            description: this.description,
            articleSection: 'Technology',
            mainEntityOfPage: `https://www.toolify.ai${this.$route.fullPath}`,
            publisher: {
              '@context': 'https://www.toolify.ai',
              '@type': 'Organization',
              name: 'Toolify',
              legalName: 'Toolify Inc',
              url: 'https://www.toolify.ai',
              logo: 'https://www.toolify.ai/favicon.ico',
              foundingDate: '2023',
              founders: [
                {
                  '@type': 'Organization',
                  name: 'toolify',
                },
              ],
              address: {
                '@type': 'PostalAddress',
                streetAddress: '1942 Broadway St STE 314C Boulder',
                addressLocality: 'Colorado',
                addressRegion: 'CO',
                postalCode: '80302',
                addressCountry: 'US',
              },
              contactPoint: {
                '@type': 'ContactPoint',
                contactType: 'customer support',
                email: 'business@toolify.ai',
              },
              sameAs: ['https://twitter.com/samChan3890089'],
            },
            name: this.title,
            breadcrumb: {
              '@type': 'BreadCrumbList',
              itemListElement:
                this.tool &&
                this.tool.categories &&
                this.tool.categories.length > 0
                  ? [
                      {
                        '@type': 'ListItem',
                        position: 1,
                        name: this.$t('home'),
                        item: `https://www.toolify.ai${
                          this.locale === 'en' ? '' : `/${this.locale}`
                        }`,
                      },
                      {
                        '@type': 'ListItem',
                        position: 2,
                        name: this.tool.categories[0].name,
                        item: `https://www.toolify.ai${
                          this.locale === 'en' ? '' : `/${this.locale}`
                        }/category/${this.tool.categories[0].handle}`,
                      },
                      {
                        '@type': 'ListItem',
                        position: 3,
                        name: this.$t('categories'),
                        item: `https://www.toolify.ai${
                          this.locale === 'en' ? '' : `/${this.locale}`
                        }/tool/${this.$route.params.handle}`,
                      },
                      {
                        '@type': 'ListItem',
                        position: 4,
                        name: this.$t('review_tooLReview', {
                          toolName:
                            this.tool && this.toolName
                              ? this.toolName
                              : this.$route.params.handle,
                        }),
                      },
                    ]
                  : [
                      {
                        '@type': 'ListItem',
                        position: 1,
                        name: this.$t('home'),
                        item: `https://www.toolify.ai${
                          this.locale === 'en' ? '' : `/${this.locale}`
                        }`,
                      },
                      {
                        '@type': 'ListItem',
                        position: 2,
                        name: this.$t('categories'),
                        item: `https://www.toolify.ai${
                          this.locale === 'en' ? '' : `/${this.locale}`
                        }/tool/${this.$route.params.handle}`,
                      },
                      {
                        '@type': 'ListItem',
                        position: 3,
                        name: this.$t('review_tooLReview', {
                          toolName:
                            this.tool && this.toolName
                              ? this.toolName
                              : this.$route.params.handle,
                        }),
                      },
                    ],
            },
          },
          type: 'application/ld+json',
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, error, store }) {
    let pageDesc = app.$cookies.get('pageDesc')
    try {
      let res = {}
      let description = null,
        title

      let [reviewRes, langRes, recommendRes] = await Promise.all([
        $axiosApi.getReviews(encodeURIComponent(params.handle)),
        $axiosApi.getLanguagesMul(),
        $axiosApi.searchGetAd({
          limit: 5,
        }),
      ])

      if (reviewRes.code === 200) {
        res.tool = reviewRes.data.tool
        res.review = reviewRes.data.review
        res.prev = reviewRes.data.prev
        res.next = reviewRes.data.next

        function websiteName(tool) {
          let toolName = tool.name
          if (tool.website && tool.website && tool.website.name) {
            toolName = tool.website.name
          }
          return toolName
        }

        title = app.i18n.t('review_pageTitle', {
          toolName: websiteName(res.tool),
        })

        /* description = app.i18n.t('review_pageDesc', {
          toolName: res.tool.name,
        }) */
      } else {
        if (reviewRes && reviewRes.code && reviewRes.code === 404) {
          error({ statusCode: 404 })
        } else if (!(reviewRes && reviewRes.code && reviewRes.code === 401)) {
          error({
            message:
              'There is a problem with the network. Please refresh and try again later',
            statusCode: reviewRes.code,
          })
        }
      }

      /* if (!description) {
        let curLocale = store.state.locale
        if (
          langRes.code === 200 &&
          langRes.data &&
          langRes.data.languages &&
          langRes.data.languages.description &&
          langRes.data.languages.description.length > 0 &&
          langRes.data.languages.description[0].content &&
          (langRes.data.languages.description[0].content[curLocale] ||
            langRes.data.languages.description[0].content.default)
        ) {
          if (langRes.data.languages.description[0].content[curLocale]) {
            description =
              langRes.data.languages.description[0].content[curLocale]
          } else {
            description = langRes.data.languages.description[0].content.default
          }

          app.$cookies.set('pageDesc', description, {
            maxAge: 60 * 60 * 24 * 7,
            path: '/',
          })
        } else if (pageDesc) {
          description = pageDesc
        }
      } */

      let recommendBottomList = []
      if (
        recommendRes.code === 200 &&
        recommendRes.data &&
        recommendRes.data.featured_list &&
        recommendRes.data.featured_list.length > 0
      ) {
        store.commit(
          'SET_TOP_ADVERTISER',
          JSON.parse(JSON.stringify(recommendRes.data.featured_list[0]))
        )
        recommendBottomList = recommendRes.data.featured_list.slice(0, 4)
      } else {
        store.commit('SET_TOP_ADVERTISER', null)
      }
      return {
        ...res,
        title,
        description,
        recommendBottomList,
      }
    } catch (err) {
      console.log(err)
    }
  },
  filters: {
    vResetVisit: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val < 5000) {
          return '< 5K'
        } else if (val >= 5000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return '< 5K'
      }
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
    toolName() {
      return this.$websiteName(this.tool)
    },
  },
  mixins: [mixinsExposure],
  data() {
    return {
      description: null,
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,

      recommendBottomList: [],

      tool: {},
      review: {},
      prev: {},
      next: {},
    }
  },
  mounted() {
    if (this.$refs.menu) {
      this.$refs.menu.addEventListener('click', this.handleClick)
    }
  },
  methods: {
    ...mapActions(['exposure']),
    fI18n(arg) {
      const hasKey = this.$i18n.t(arg)
      if (hasKey) {
        const result = this.$i18n.t(arg)
        return result
      }
      return arg
    },
    getLocaleText(val, val_locales) {
      if (
        Object.prototype.toString.call(val_locales) === '[object Object]' &&
        typeof val_locales[this.locale] != 'undefined' &&
        val_locales[this.locale] !== null &&
        val_locales[this.locale] !== ''
      ) {
        return val_locales[this.locale]
      } else {
        return val
      }
    },
    handleExp(key = 0, toolsData, position = 'breadcrumbs') {
      this.getThrottledClickFunction(toolsData, key, position)()
    },
    getThrottledClickFunction(toolsData, key, position) {
      let functionKey = `${toolsData.handle}-${key}`
      if (!this.throttledClickFunctions[functionKey]) {
        this.throttledClickFunctions[functionKey] = _.throttle(() => {
          let exporeData = this.getExporeData(toolsData, position, 1, false)
          this.exposure({
            ...exporeData,
          })
        }, 2000) // 设置节流时间间隔
      }
      return this.throttledClickFunctions[functionKey]
    },
    handleClick(event) {
      if (
        event.target.getAttribute('href') &&
        event.target.getAttribute('href') !== '#'
      ) {
        const dom = document.querySelector(event.target.getAttribute('href'))
        if (dom) {
          const top = dom.offsetTop

          const targetScrollPosition = Math.max(top - 90, 0)

          let timer = setTimeout(() => {
            window.scrollTo({
              top: targetScrollPosition,
              behavior: 'auto',
            })

            this.$nextTick(() => {
              clearTimeout(timer)
            })
          })
        }
      }
    },
  },
  beforeDestroy() {
    if (this.$refs.menu) {
      this.$refs.menu.removeEventListener('click', this.handleClick)
    }
  },
}
</script>
<style lang='scss' scoped>
.review-container {
  .t-label {
    padding: 4px 12px;
  }
  .page-ctrl {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    border: 1px solid #e5e5e5;
  }
}
@media (min-width: 640px) {
  .review-container {
    .w-pic {
      &.w-full {
        width: 46.902654867% !important;
      }
    }
    .w-pic-f {
      &.w-full {
        width: 49.7826086956% !important;
      }
    }
  }
}
</style>
<style lang="scss">
.review-content {
  * {
    max-width: 100%;
    word-wrap: break-word !important;
    word-break: normal !important;
  }
  li {
    display: list-item;
  }
  head {
    display: none;
  }
  table {
    display: table;
  }
  tr {
    display: table-row;
  }
  thead {
    display: table-header-group;
  }
  tbody {
    display: table-row-group;
  }
  tfoot {
    display: table-footer-group;
  }
  col {
    display: table-column;
  }
  colgroup {
    display: table-column-group;
  }
  td,
  th {
    display: table-cell;
  }
  caption {
    display: table-caption;
  }
  th {
    font-weight: bolder;
    text-align: center;
  }
  caption {
    text-align: center;
  }
  body {
    margin: 8px;
    line-height: 1.12;
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  h2 {
    font-size: 1.5em;
    margin: 0.75em 0;
  }
  h3 {
    font-size: 1.17em;
    margin: 0.83em 0;
  }
  h4,
  p,
  blockquote,
  ul,
  fieldset,
  form,
  ol,
  dl,
  dir,
  menu {
    margin: 1.12em 0;
  }
  h5 {
    font-size: 0.83em;
    margin: 1.5em 0;
  }
  h6 {
    font-size: 0.75em;
    margin: 1.67em 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  b,
  strong {
    font-weight: bolder;
  }
  blockquote {
    margin-left: 40px;
    margin-right: 40px;
  }
  i,
  cite,
  em,
  var,
  address {
    font-style: italic;
  }
  pre,
  tt,
  code,
  kbd,
  samp {
    font-family: monospace;
  }
  pre {
    white-space: pre;
  }
  button,
  textarea,
  input,
  object,
  select {
    display: inline-block;
  }
  big {
    font-size: 1.17em;
  }
  small,
  sub,
  sup {
    font-size: 0.83em;
  }
  sub {
    vertical-align: sub;
  }
  sup {
    vertical-align: super;
  }
  table {
    border-spacing: 2px;
  }
  thead,
  tbody,
  tfoot {
    vertical-align: middle;
  }
  td,
  th {
    vertical-align: inherit;
  }
  s,
  strike,
  del {
    text-decoration: line-through;
  }
  hr {
    border: 1px inset;
  }
  ol,
  ul,
  dir,
  menu,
  dd {
    margin-left: 40px;
  }
  ol {
    list-style-type: decimal;
  }
  ol ul,
  ulol,
  ul ul,
  ol ol {
    margin-top: 0;
    margin-bottom: 0;
  }
  ul {
    list-style: disc;
  }
  ol {
    list-style: decimal;
  }
  u,
  ins {
    text-decoration: underline;
  }
  br:before {
    content: '';
  }

  #menu {
    margin: 0;
    padding-left: 1.12em;
    padding: 20px 1em 20px 2.12em;
    background: #f4f2fa;
    border-radius: 6px;
    list-style: none;
    li {
      list-style: none;
      & + li,
      ul {
        margin-top: 16px;
      }
    }
    ul {
      list-style: none;
    }
  }
  a {
    &:hover {
      cursor: pointer;
      color: #7150e6;
      text-decoration: underline;
    }
  }
}
</style>
